<template>
	<div class="gerengongzi" style="background-color: #f3f3f3">
		<div style="width:100%;height:100%;background-color: #f3f3f3;position:absolute;z-index:-999"></div>
		<div class="header2">工资查看</div>
		
		<div class="selectTime">
			<span style="color:#eb6100;font-size: 0.24rem;margin-left: 0.4rem">发薪月份</span>
			<Select v-model="year" style="width:2rem;margin-left: 0.3rem">
				<Option v-for="item in yearList" :value="item.value" :key="item" :selected="item.selected">{{ item.label }}</Option>
			</Select>
			<Select v-model="month" style="width:2rem;margin-left: 0.3rem">
				<Option v-for="item in monthList" :value="item.value" :key="item">{{ item.label }}</Option>
			</Select>
		</div>
		<div class="userinfo">
			<img src="../../assets/img/个人信息·.png" class="geren">
			<div class="info">
				<div class="title"><span >{{infodata.realname}}<span>（</span>{{infodata.job}}<span>）</span></span></div>
				<div class="infobox1">
					<span class="infotitle">部门:<span class="infocontain">{{infodata.department}}</span></span>
					<!-- <span class="infotitle">品牌:<span class="infocontain">space</span></span> -->
					<span style="position: absolute;left: 4.9rem">姓名:<span class="infocontain">{{infodata.realname}}</span></span>
				</div>
				<div class="infobox2 infoboxTitle">
					<span>身份证</span>
					<span style="position: absolute;left: 4.9rem">系统名</span>
				</div>
				<div class="infobox2 infoboxContent" >
					<span>{{infodata.idcard}}</span>
					<span style="position: absolute;left: 4.9rem">{{infodata.username}}</span>
				</div>
				<div class="infobox2 infoboxTitle">
					<span>银行卡号</span>
					<span style="position: absolute;left: 4.9rem">手机</span>
				</div>
				<div class="infobox2 infoboxContent" >
					<span>{{infodata.bankcard}}</span>
					<span style="position: absolute;left: 4.9rem">{{infodata.mobile}}</span>
				</div>
			</div>
		</div>
		<div class="salaryinfo">
			<img src="../../assets/img/title2.png" class="geren">
			<div class="info2" id="info2" v-show="isInfo">
				<div style="padding-top: 0.15rem">
					<div class="jianlan1" v-on:click="kaoqin" id="info1_1"><span>考勤薪资</span></div>
					<div class="jianlan1" v-on:click="ticheng" id="info1_2"><span>提成业绩·</span></div>
					<div class="jianlan1" v-on:click="jiangfa" id="info1_3"><span>奖励合计</span></div>
					<div class="jianlan1" v-on:click="yingkou" id="info1_4"><span>应扣合计</span></div>
					<div class="jianlan1 orange" v-on:click="shiji" id="info1_5"><span>实际合计</span></div>
				</div>
				<div>
					<div class="jianlan1" v-on:click="kaoqin" id="info2_1"><span>{{kaoqinInfo.sum}}</span></div>
					<div class="jianlan1" v-on:click="ticheng" id="info2_2"><span>{{tichengInfo.sum}}</span></div>
					<div class="jianlan1" v-on:click="jiangfa" id="info2_3"><span>{{jiangliInfo.sum}}</span></div>
					<div class="jianlan1" v-on:click="yingkou" id="info2_4"><span>{{yingkouInfo.sum}}</span></div>
					<div class="jianlan1 orange" v-on:click="shiji" id="info2_5"><span>{{shijiInfo.sum}}</span></div>
				</div>
			</div>
			<div class="container" v-show="isInfo">
				<div class="content">
					<ul>
						<li v-for="(item,index) in salaryinfo.data">
							<span style="float: left;margin-left:0.2rem ">{{index}}</span>
							<span style="float: right;margin-right:0.2rem ">{{item}}</span>
						</li>
						

					</ul>
				</div>
				<s id="s">
					<i></i>
				</s>
			</div>
			<p style="text-align:center;font-size:0.4rem;color: gray" v-show="!isInfo">无当月数据</p>
			
		</div>
		<div style="height:1rem;background-color: rgb(243, 243, 243);"></div>
		

		<!-- <div class="suggest">
			<img src="../../assets/img/反馈信息.png" class="geren">
		</div>
		<div style="text-align: center;"><button class="fasong">确认发送</button></div> -->
	</div>
</template>
<script>
	import { MessageBox } from 'mint-ui';
	export default {
		mounted(){
			if (localStorage.userinfo) {
				this.infodata =JSON.parse(localStorage.userinfo);
				console.log("用户数据",this.infodata)
				
			}
		},
		created(){
			var myDate = new Date()
			this.year = myDate.getFullYear()
			var a = myDate.getMonth()+1
			this.month = "0"+a
			this.getdata()
			
			
			
		},
		data () {
			return {
				yearList: [
				{
					value: 2017,
					label: '2017年',
					selected:"true"
				},
				{
					value: 2016,
					label: '2016年'
				},
				{
					value: 2015,
					label: '2015年'
				},
				{
					value: 2014,
					label: '2014年'
				},
				{
					value: 2013,
					label: '2013年'
				},
				{
					value: 2012,
					label: '2012年'
				}
				],
				monthList:[
				{
					value: "01",
					label: '1月'
				},
				{
					value: '02',
					label: '2月'
				},
				{
					value: '03',
					label: '3月'
				},
				{
					value: '04',
					label: '4月'
				},
				{
					value: '05',
					label: '5月'
				},
				{
					value: '06',
					label: '6月'
				},
				{
					value: '07',
					label: '7月'
				},
				{
					value: '08',
					label: '8月'
				},
				{
					value: '09',
					label: '9月'
				},
				{
					value: '10',
					label: '10月'
				},
				{
					value: '11',
					label: '11月'
				},
				{
					value: '12',
					label: '12月'
				}
				],
				year: '',
				month: '',
				kaoqinInfo:{},
				tichengInfo:{},
				jiangliInfo:{},
				yingkouInfo:{},
				shijiInfo:{},
				salaryinfo:{},
				infodata:{},
				date:'',
				isInfo:true


			}
		},
		watch:{
			'year':'getdata',
			'month':'getdata'
		},
		methods:{
			gengxintoken:function(){
				var _this = this
				this.$http.post('http://api.kx910.com/api/wechat/refreshToken',{
					idcard:_this.infodata.idcard,
					openid:_this.infodata.openid
				})
				.then(function(res){
					if (res.data.code<=0) {
						MessageBox.alert(res.data.data, "提示").then(action =>{
							_this.$router.push('/renzheng')
						});

					}
					else{						
						localStorage.wxToken = res.data.data.token
						localStorage.userinfo=JSON.stringify(res.data.data)
					}
				})
			},
			getdata:function(){
				this.date = this.year+"-"+this.month+"-"+"15"
				var _this = this
				this.$http.get('http://api.kx910.com/api/wechat/getUserSalary',{
					params:{
						token:localStorage.wxToken,
						date:this.date
					}
				})
				.then(function(res){
					console.log("res",res)
					if (res.data.code<=0) {
						_this.isInfo = false						
					}
					if (res.data.code==-1) {
						_this.gengxintoken()
					}
					_this.kaoqinInfo = res.data.data[1]
					_this.tichengInfo = res.data.data[2]
					_this.jiangliInfo = res.data.data[3]
					_this.yingkouInfo = res.data.data[4]
					_this.shijiInfo = res.data.data[5]
					_this.salaryinfo = _this.shijiInfo
					console.log(_this.salaryinfo)
				})
			},
			kaoqin:function  () {
				// body... 
				
				document.getElementById("s").style.left="0.4rem";
				$('.jianlan1').removeClass('orange')
				$('#info1_1,#info2_1').addClass('orange')
				this.salaryinfo = this.kaoqinInfo
				console.log('suc1')
			},
			ticheng:function () {
				document.getElementById("s").style.left="1.8rem"
				$('.jianlan1').removeClass('orange')
				$('#info1_2,#info2_2').addClass('orange')
				this.salaryinfo = this.tichengInfo
				console.log('suc2')
			},
			jiangfa:function(){
				document.getElementById("s").style.left="3.2rem"
				$('.jianlan1').removeClass('orange')
				$('#info1_3,#info2_3').addClass('orange')
				this.salaryinfo = this.jiangliInfo
			},
			yingkou:function(){
				document.getElementById("s").style.left="4.6rem"
				$('.jianlan1').removeClass('orange')
				$('#info1_4,#info2_4').addClass('orange')
				this.salaryinfo = this.yingkouInfo
			},
			shiji:function () {
				// body...
				document.getElementById("s").style.left="6rem"
				$('.jianlan1').removeClass('orange')
				$('#info1_5,#info2_5').addClass('orange')
				this.salaryinfo = this.shijiInfo
			}

		}
	}
</script>
<style scoped>
	.header2{
		padding-bottom: 1.05rem;
		width: 100%;
		text-align: center;
		font-size: 0.36rem;
		padding-top: 0.35rem;
		color: white;
		background:url(../../assets/img/正常-1_02.png) no-repeat;
		background-size: contain
	}
	.selectTime{
		margin-top: 0.7rem
	}
	.geren{
		width: 1.2rem;display: block;
		margin: 0.28rem 0.5rem;
	}
	.info{
		width: 7rem;
		padding-bottom: 0.2rem;
		margin: 0 auto;
		background-color: white;
		box-shadow   : 3px 3px 4px #cbcbcb; 
		-moz-box-shadow  : 3px 3px 4px #cbcbcb; 
		-webkit-box-shadow : 3px 3px 4px #cbcbcb; 
	}
	.title{
		height: 0.75rem;line-height: 0.75rem;margin:0 0.35rem;
		border-bottom: 2px solid #eb6100
	}
	.infobox1{
		color: gray;
		margin:0 0.35rem;
		margin-top: 0.21rem
	}
	.infotitle{
		margin-right: 1.0rem;
	}
	.infocontain{
		color: black
	}
	.infobox2{
		margin: 0rem 0.35rem
	}
	.infoboxTitle{
		
		margin-top: 0.11rem
	}
	.infoboxContent{
		margin-top: 0.08rem;
		color: black;
	}
	.info2{
		width: 7rem;
		height: 1rem;
		margin: 0 auto;
		border: 1px solid;
		box-shadow   : 3px 3px 4px #cbcbcb; 
		-moz-box-shadow  : 3px 3px 4px #cbcbcb; 
		-webkit-box-shadow : 3px 3px 4px #cbcbcb; 
		background-color: white;
		border: none
	}
	.jianlan1{
		display: inline-block;
		width: 19%;
		text-align: center;
	}
	.salaryinfo{
		position: relative;
		
	}
	div.container{
		position   :relative; 
		margin-top    :0.2rem; 
		left    :0.3rem; 
		font-size  : 9pt; 
		display   :block; 
		
		width   :200px; 
		background-color :transparent; 
		*border   :1px solid #666; 
	} 
	#s{ 
		position  :absolute; 
		top   :-20px; 
		*top   :-22px; 
		left   :6rem; 
		display  :block; 
		height  :0; 
		width  :0; 
		font-size : 0; 
		line-height : 0; 
		border-color :transparent transparent transparent transparent; 
		border-style :dashed dashed solid dashed; 
		border-width :10px; 
	} 
	div.container i{
		position  :absolute; 
		top   :-9px; 
		*top   :-9px; 
		left   :-10px; 
		display  :block; 
		height  :0; 
		width  :0; 
		font-size : 0; 
		line-height : 0; 
		border-color :transparent transparent #fff transparent; 
		border-style :dashed dashed solid dashed; 
		border-width :10px; 
	} 
	.content{ 

		-moz-border-radius :3px; 
		-webkit-border-radius :3px; 

		background-color  :#fff; 
		width     :6.9rem; 
		
		padding    :5px; 
		*top     :-2px; 
		*border-top   :1px solid #666; 
		*border-top   :1px solid #666; 
		*border-left   :none; 
		*border-right   :none; 
		*height    :102px; 
		box-shadow   : 3px 3px 4px #cbcbcb; 
		-moz-box-shadow  : 3px 3px 4px #cbcbcb; 
		-webkit-box-shadow : 3px 3px 4px #cbcbcb; 
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cbcbcb999'); 
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cbcbcb999')"; 
	}
	.content ul li {
		border-bottom: 1px solid rgb(240, 240, 240);;
		overflow: hidden;

	}
	.suggest{
		margin-top: 0.3rem
	}
	.fasong{
		background-color: #eb6100;
		border: none;outline: 0;
		border-radius: 0.1rem;
		width: 2rem;
		height: 0.5rem;
		color: white
	}
	.orange{
		color: #eb6100
	}
	.black{
		color: black
	}
</style>